jquery.makeCollapsible: Enable passthru for links in premade toggle

Clicking on a regular link inside a premande toggle is supposed
to follow the link instead of collapsing/expanding the
appropriate element.

Broken during a rewrite in Id3f457a8 (2638b16c) - the comment
reflected the intended behavior, but the code was wrong.

Regression test included.

Bug: 46848
Change-Id: Id571f8d612e5131845d381121604c2b1116a077f

diff --git a/resources/jquery/jquery.makeCollapsible.js b/resources/jquery/jquery.makeCollapsible.js
index 09fe06e..e1a07b6 100644 (file)
--- a/resources/jquery/jquery.makeCollapsible.js
+++ b/resources/jquery/jquery.makeCollapsible.js
@@ -217,7 +217,7 @@
         */
        function toggleLinkPremade( $that, e, options ) {
                var $collapsible = $that.eq( 0 ).closest( '.mw-collapsible' );
-               options = $.extend( { toggleClasses: true }, options );
+               options = $.extend( { toggleClasses: true, linksPassthru: true }, options );
                togglingHandler( $that, $collapsible, e, options );
        }
 
@@ -230,7 +230,6 @@
         * @param {jQuery} $collapsible
         */
        function toggleLinkCustom( $that, e, options, $collapsible ) {
-               options = $.extend( { linksPassthru: true }, options );
                togglingHandler( $that, $collapsible, e, options );
        }
 

diff --git a/tests/qunit/suites/resources/jquery/jquery.makeCollapsible.test.js b/tests/qunit/suites/resources/jquery/jquery.makeCollapsible.test.js
index 9f34bee..7ae743c 100644 (file)
--- a/tests/qunit/suites/resources/jquery/jquery.makeCollapsible.test.js
+++ b/tests/qunit/suites/resources/jquery/jquery.makeCollapsible.test.js
@@ -115,4 +115,26 @@
                $collapsible.find( '.mw-collapsible-toggle' ).trigger( 'click' );
        } );
 
+       QUnit.test( 'premade toggler - options.linksPassthru' , 2, function ( assert ) {
+               var $collapsible, $content;
+
+               $collapsible = prepareCollapsible(
+                       '<div class="mw-collapsible">' +
+                               '<div class="mw-collapsible-toggle">' +
+                                       'Toggle <a href="#top">toggle</a> toggle <b>toggle</b>' +
+                               '</div>' +
+                               '<div class="mw-collapsible-content">' + loremIpsum + '</div>' +
+                       '</div>',
+                       // Can't do asynchronous because we're testing that the event *doesn't* happen
+                       { instantHide: true }
+               );
+               $content = $collapsible.find( '.mw-collapsible-content' );
+
+               $collapsible.find( '.mw-collapsible-toggle a' ).trigger( 'click' );
+               assert.assertTrue( $content.is( ':visible' ), 'click event on link inside toggle passes through (content not toggled)' );
+
+               $collapsible.find( '.mw-collapsible-toggle b' ).trigger( 'click' );
+               assert.assertTrue( $content.is( ':hidden' ), 'click event on non-link inside toggle toggles content' );
+       } );
+
 }( mediaWiki, jQuery ) );